export default {
  // functional:true,//功能组件 ，不能使用this
  render(h) {
    let header = this.$slots.header;
    let footer = this.$slots.footer;
    return h(
      "div",
      {
        class: "box",
        style: {
          lineHeight: "20px",
          textIndent: "100px",
          border: "1px solid orange",
          marginBottom: "20px",
        },
        attrs: {
          // id:'box'
        },
        domProps: {
          id: "box2",
          // innerHTML:""
        },
        directives: [
          {
            name: "color",
          },
        ],
      },
      [
        "渲染函数写的功能组件",
        h(
          "div",
          {
            class: "header",
            on: {
              click() {
                console.log("header");
              },
            },
          },
          header
        ),
        h(
          "div",
          {
            class: "footer",
            on: {
              click() {
                console.log("footer");
              },
            },
          },
          footer
        ),
      ]
    );
  },
};
